import React, { useState } from 'react';
import { Form, Modal, message, Icon } from 'antd';

import { isSuccess } from '@/utils/request';

import rejectStyles from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle/index.less';
import LimitInput from '@/components/LimitInput';

const RejectModal = ({ form, modalVisible, currentRecord = {}, dispatch, dispatchType, period }) => {
    const { getFieldDecorator } = form;

    //  弹窗=》确定按钮是否加载状态
    const [confirmLoad, setConfirmLoad] = useState(false);

    const onRejectOk = () => {
        form.validateFields((errors, value) => {
            if (errors) {
                return;
            }
            setConfirmLoad(true);
            let postValue = null;
            let patchType = null;
            if (currentRecord.id) {
                patchType = dispatchType.reject;
                postValue = {
                    ...value,
                    salaryPayrollId: currentRecord.id
                };
            } else {
                patchType = dispatchType.batchReject;
                postValue = {
                    ...value,
                    year: period?.substr(0, 4),
                    month: period?.substr(5)
                };
            }
            dispatch({
                type: patchType,
                payload: postValue,
                callback: response => {
                    if (isSuccess(response)) {
                        message.success('驳回成功');
                    } else {
                        message.error(response.msg);
                    }
                    setConfirmLoad(false);
                }
            });
        });
    };

    const onRejectClose = () => {
        dispatch({
            type: dispatchType.setModalVisibleType,
            payload: false
        });
    };

    const title = '驳回';

    return (
        <Modal
            title={title}
            visible={modalVisible}
            onOk={onRejectOk}
            onCancel={onRejectClose}
            destroyOnClose
            centered
            confirmLoading={confirmLoad}
        >
            <div className={rejectStyles.msg}>
                <Icon type="exclamation-circle" theme="filled" />
                将驳回{currentRecord?.employeeName ?? '全部'}的薪资，请确认
            </div>
            <Form layout="inline" className={rejectStyles.recheckForm}>
                <Form.Item label="驳回备注">
                    {getFieldDecorator('remark')(
                        <LimitInput rows={4} cols={45} maxLength={200} area showNumber placeholder="请输入" />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create()(RejectModal);
